import { onMounted, ref } from "vue"

// 多主题切换
let isInit: boolean = false

export enum ThemeKey {
    PRIMARY = 'primary',
    NEWSIMULATION = 'new-simulation'
}
export enum StorageKey {
    THEME = 'THEME',
}

export const useTheme = () => {
    const theme = ref<ThemeKey>(ThemeKey.NEWSIMULATION)
    const toggleTheme = (_theme: ThemeKey) => {
		document.body.setAttribute('data-theme', _theme)
        theme.value = _theme
        localStorage.setItem(StorageKey.THEME, _theme)
    }

    onMounted(() => {
        if (!isInit) {
            isInit = true
            const _theme = localStorage.getItem(StorageKey.THEME) as ThemeKey || ThemeKey.NEWSIMULATION
            toggleTheme(_theme)
        }
    })

    return { theme, toggleTheme }
}